import React, { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'

import "../css/Donation.scss"
import { NavBar, SearchBar, Image } from 'antd-mobile'
import { popUpList, recommendList } from '../service/DonationService'


export default function Donation() {

  const nacigate = useNavigate();
  // const Classify = () => {
  //   nacigate('/classifyPage', { state: { id} })
  // }
  //------------------分类
  const Url = "http://124.93.196.45:10001/";
  const [popupList, setpopupList] = useState<any>([])//分类的集合
  const [recommend, setrecommend] = useState([])//推荐list
  //------------------------------------------导航返回
  const back = () => {
    window.history.back()
  }

  //--------------------------------------请求数据
  const search = async () => {
    let res = await popUpList()//分类
    setpopupList(res.data.data);
    // console.log(res.data.data);

    let res2 = await recommendList()//推荐
    setrecommend(res2.data.rows);
    // console.log(res2.data.rows);

    // let res3 = await popItemList(13)


    // setrecommend()
  }

  useEffect(() => {//页面加载时
    search()
  }, [])
  //---------------------------------------点击跳转



  return (
    <div className='Donation'>
      <div className='Donation-top'>
        <NavBar back='爱心捐赠' onBack={back}></NavBar>
      </div>
      <div className='Donation-top-middle'>
        <SearchBar placeholder='嗨！好心人' />
        <p>让我们一起做点好事儿吧~</p>
        <div className='Donation-top-popUp'>
          <div className='top-text'>凝聚爱心用户<span>11</span>次捐赠</div>
          <ul>
            {

              popupList && popupList.map((item: any) => {
                return <li key={item.id} onClick={() => {
                  nacigate('/classifyPage', { state: { id: item.id } })
                }}>
                  <Image src={Url + item.imgUrl}
                    width={48}
                    height={48}
                    fit='cover'
                    style={{ display: 'block', margin: "auto" }}
                  />
                  <p>{item.name}</p>
                </li>
              })
            }
          </ul>
        </div>
      </div>
      <div className='weini'>为你精选</div>
      <ul className='recommend-List'>
        {recommend && recommend.map((item: any) => {
          return (
            <li key={item.id}>

              <div className='box'>
                <Image src={Url + item.imgUrl}
                  width={180}
                  height={130}
                  fit='cover'
                  style={{ borderRadius: 15 }}
                />

                <div className='box-text'>
                  <p className='recommend-title'>{item.author}</p>
                  <p className='recommend-text'>{item.name}</p>
                </div>
              </div>
              <p className='recommend-time'>{item.createTime}</p>
            </li>
          )
        })}
      </ul>
    </div>
  )
}
